{#
Copyright (c) 2020 Andy Zhou
MIT License
#}
{% macro static_file(type, filename_or_url, local=True, alt=None, width=None, height=None) %}
    {% if local -%}
        {% set filename_or_url = url_for('static', filename=filename_or_url) %}
    {%- endif %}
    {% if type == 'css' -%}
        <link rel="stylesheet" href="{{ filename_or_url }}">
    {% elif type == 'js' -%}
        <script src="{{ filename_or_url }}"></script>
    {% elif type == 'icon' -%}
        <link rel="icon" href="{{ filename_or_url }}">
    {% elif type == "svg" -%}
        <img src="{{ filename_or_url }}"
             type="image/svg+xml"
             {% if width %}width="{{ width }}"{% endif %}
             {% if height %}height="{{ height }}"{% endif %}
             class="pi-icon">
    {%- endif %}
{% endmacro %}

{% macro render_timestamp(timestamp) %}
    <span data-toggle="tooltip" data-placement="top" data-delay="500"
          data-timestamp="{{ timestamp.strftime('%Y-%m-%dT%H:%M:%SZ') }}">
        {{ moment(timestamp).fromNow(refresh=True) }}
    </span>
{% endmacro %}

{% macro role_of(user) %}
    {% if user.is_administrator() -%}
        {{ _("Administrator") }}
    {% elif user.can(Permission.MODERATE) -%}
        {{ _("Moderator") }}
    {% else -%}
        {{ _("User") }}
    {%- endif %}
{% endmacro %}

{% macro render_user_role(user) %}
    <span class="{% if user.is_administrator() %} text-danger {% elif user.can(Permission.MODERATE) %} text-warning {% elif user.locked %} text-muted {% endif %}">
        {{ user.username }}
    </span>
{% endmacro %}

{% macro level_badge(user) %}
    <span class="level-badge">
        <img src="{{ user.level_badge_link() }}" alt="level-badge">
    </span>
{% endmacro %}

{% macro follow_area(user) %}
    {% if current_user.is_authenticated -%}
        {% if user != current_user -%}
            {% if current_user.is_following(user) -%}
                <form class="form-inline" method="POST"
                      action="{{ url_for('user.unfollow', username=user.username) }}"
                      next="{{ request.full_path }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-dark btn-sm">{{ _("Unfollow") }}</button>
                    {% if user.is_following(current_user) and current_user.is_following(user) -%}
                        <p class="badge badge-light">{{ _("Follow each other") }}</p>
                    {%- endif %}
                </form>
            {% else -%}
                <form class="form-inline" method="POST"
                      action="{{ url_for('user.follow', username=user.username) }}"
                      next="{{ request.full_path }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-primary btn-sm">{{ _("Follow") }}</button>
                    {% if user.is_following(current_user) -%}
                        <p class="badge badge-light">{{ _("Follows you") }}</p>
                    {%- endif %}
                </form>
            {%- endif %}
        {%- endif %}
    {%- endif %}
{% endmacro %}

{% macro post_actions(post, can_edit=True, can_delete=True, show_collectors=None, collectors=0) %}
    {% if current_user.is_authenticated -%}
        <div class="d-flex justify-content-start align-items-center">
            {% if post.author != current_user -%}
                {% if not current_user.is_collecting(post) -%}
                    <a class="btn-action" href="{{ url_for('main.collect_post', id=post.id) }}">
                        <i class="bi-star-fill"></i>
                        {{ _("Collect") }}
                        {{ post.collectors | length }}
                    </a>
                {% else -%}
                    <a class="btn-action-activated" href="{{ url_for('main.uncollect_post', id=post.id) }}" style="background-color: var(--orange);">
                        <i class="bi-bookmark-x-fill"></i>
                        {{ _("Uncollect") }}
                        {{ post.collectors | length }}
                    </a>
                {%- endif %}
            {%- endif %}
            {% if post.author == current_user %}
                <a class="link-action" href="javascript:void(0)">
                    {{ static_file("svg", "svg/pi.svg", width=15, height=15) }}
                    {{ post.coins }}
                </a>
            {% endif %}
            {% if post.author != current_user %}
                {% if not post in current_user.coined_posts -%}
                    <a class="link-action link-coin" href="javascript:void(0)" data-toggle="modal" data-target="#coin{{ post.id }}">
                        {{ static_file("svg", "svg/pi.svg", width=15, height=15) }}
                        {{ post.coins }}
                    </a>
                    <div class="modal fade" id="coin{{ post.id }}">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">{{ _("How many coins?") }}</h4>
                                    <a class="close text-right" href="javascript:void(0)" data-dismiss="modal">&times;</a>
                                </div>
                                <div id="coinForm" data-post-id="{{ post.id }}" data-error-message="{{ _('Please select how many coins you want to give out.') }}">
                                    <div class="modal-body d-flex">
                                        <button id="coinOne{{ post.id }}" class="btn flex-fill coin-option coin-one mr-1" name="coins" value="1">
                                            <span class="coin-text">1 coin</span><br>
                                            <img src="{{ url_for('static', filename='svg/pi.svg') }}" type="image/svg+xml" class="coin-one-img">
                                        </button>
                                        <button id="coinTwo{{ post.id }}" class="btn flex-fill coin-option coin-two ml-1" name="coins" value="2">
                                            <span class="coin-text">2 coins</span><br>
                                            <img src="{{ url_for('static', filename='svg/pi.svg') }}" type="image/svg+xml" class="coin-two-img">
                                            <img src="{{ url_for('static', filename='svg/pi.svg') }}" type="image/svg+xml" class="coin-two-img">
                                        </button>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-primary m-auto coin-submit">{{ _("Submit") }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% else -%}
                    <a class="link-action-activated">
                        {{ static_file("svg", "svg/pi-activated.svg", width=15, height=15) }}
                        {{ post.coins }}
                    </a>
                {%- endif %}
            {%- endif %}
            {% if current_user.can(Permission.MODERATE) %}
                {% if not post.picked or post.private %}
                    <form class="form-inline" method="POST" action="{{ url_for('main.pick', id=post.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button class="btn-action">
                            <i class="bi-patch-plus"></i>
                            {{ _("Pick") }}
                        </button>
                    </form>
                {% else %}
                    <form class="form-inline" method="POST" action="{{ url_for('main.unpick', id=post.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button class="btn-action-activated">
                            <i class="bi-patch-minus"></i>
                            {{ _("Unpick") }}
                        </button>
                </form>
                {% endif %}
            {% endif %}
            {% if current_user.is_administrator() or post.author == current_user
                  and can_edit -%}
                <a class="link-action" href="{{ url_for('main.edit_post', id=post.id) }}">
                    <i class="bi-pencil-square"></i>
                    {{ _("Edit") }}
                </a>
            {%- endif %}
            {% if post.author -%}
                {% set post_author_can_moderate = post.author.can(Permission.MODERATE) %}
            {% else -%}
                {% set post_author_can_moderate = False %}
            {%- endif %}
            {% if current_user.can(Permission.MODERATE)  and not post_author_can_moderate
                or current_user.is_administrator()
                or post.author == current_user
                and can_delete -%}
                <form class="form-inline" method="POST" action="{{ url_for('main.delete_post', id=post.id) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button class="btn btn-sm btn-danger" onclick="return confirm('{{ _('Are you sure?') }}');">
                        <i class="bi-trash"></i>
                        {{ _("DELETE") }}
                    </button>
                </form>
            {%- endif %}
            {% if show_collectors -%}
                <br><br>
                {% set collectors = post.collectors | length %}
                <p class="text-muted ml-auto">
                    <i class="bi-star-fill"></i>
                    {{ collectors }}
                </p>
            {%- endif %}
        </div>
    {%- endif %}
{% endmacro %}

{% macro user_card(user, group=None) %}
    <li class="list-group-item d-flex">
        <div class="d-flex align-items-center">
            <a href="{{ url_for('user.profile', username=user.username) }}">
                <img src="{{ user.avatar_url() }}" class="profile-popover mr-3"
                     data-href="{{ url_for('ajax.get_profile', user_id=user.id) }}">
            </a>
            <a style="font-size: 2em;"
               class="{% if user.is_administrator() %} text-danger {% elif user.can(Permission.MODERATE) %} text-warning {% else %} text-primary {% endif %}"
               href="{{ url_for('user.profile', username=user.username) }}">{{ user.username }}</a>
        </div>
        {% if not group %}
        <span class="text-white align-items-end flex-column ml-auto">
            {% if current_user.is_administrator() -%}
                <a class="btn btn-sm btn-outline-secondary flex-fill"
                   href="{{ url_for('admin.edit_profile', id=user.id) }}">
                <i class="bi-pencil-square"></i>
                {{ _("Edit Profile") }}
            </a>
                <form class="form-inline" method="POST" action="{{ url_for('admin.delete_account', id=user.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button class="btn btn-sm btn-outline-danger flex-fill"
                        onclick="return confirm('{{ _('Are you sure?') }}');">
                    <i class="bi-trash"></i>
                    {{ _("DELETE") }}
                </button>
            </form>
            {%- endif %}
            {% if current_user.is_administrator() or
              (current_user.can(Permission.MODERATE) and not user.can(Permission.MODERATE)) -%}
                {% if not user.blocked %}
                    <form class="form-inline" method="POST" action="{{ url_for('admin.block_user', user_id=user.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button class="btn btn-sm btn-outline-dark flex-fill"
                                onclick="return confirm('{{ _('Are you sure?') }}');">
                            <i class="bi-lock"></i>
                            {{ _("LOCK") }}
                        </button>
                    </form>
                {% else %}
                    <form class="form-inline" method="POST"
                          action="{{ url_for('admin.unblock_user', user_id=user.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button class="btn btn-sm btn-outline-dark flex-fill"
                                onclick="return confirm('{{ _('Are you sure?') }}');">
                            <i class="bi-unlock"></i>
                            {{ _("UNLOCK") }}
                        </button>
                    </form>
                {% endif %}
            {%- endif %}
        {% endif %}
        {% if group and current_user == group.manager -%}
            <div class="align-items-end flex-column ml-auto">
            <form class="form-inline" method="GET" action="{{ url_for('group.set_manager', user_id=user.id, group_id=group.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button class="btn btn-sm btn-outline-warning flex-fill">
                    <i class="bi-kanban"></i>SET AS MANAGER
                </button>
            </form>
            {% if user != current_user %}
            <form class="form-inline" method="POST" action="{{ url_for('group.kick_out', user_id=user.id, group_id=group.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button class="btn btn-sm btn-outline-danger flex-fill" onclick="return confirm('{{ _('Are you sure?') }}');">
                    <i class="bi-person-x"></i>KICK OUT
                </button>
            </form>
            {% endif %}
            </div>
        {% endif %}
    </span>
    </li>
{% endmacro %}

{% macro post_card(post) %}
    <li class="list-group-item">
        <h3 class="flex-grow-1 post-title-small">
            <a href="{{ post.url() }}" title="{{ post.title }} {% if post.private %}({{ _("Private") }}){% endif %}">
                {% if post.private %}<i class="bi-eye-slash-fill"></i>{% endif %}
                {{ post.title }}
            </a>
        </h3>
        <h4 class="text-muted">
            {% if post.author %}
                <a href="{{ url_for('user.profile', username=post.author.username) }}"
                   class="profile-popover"
                   data-href="{{ url_for('ajax.get_profile', user_id=post.author.id) }}">
                    {{ post.author.username }}
                </a>
            {% else %}
                {{ _("Deleted Flog User") }}
            {% endif %}
        </h4>
        <div class="post-container">
            <div class="post-content">{{ post.content | truncate(220) | striptags }}</div>
        </div>
        <div>
            <a href="{{ url_for('main.full_post', id=post.id) }}"
               style="color: var(--primary) !important;">{{ _("Read More") }}></a>
            {% if post.columns %}
                <p class="small mb-0">
                    {{ _("This post belongs to") }}
                    {% for column in post.columns[:-1] %}
                        <a href="{{ url_for('main.view_column', id=column.id) }}">
                            {{ _("Column") }} 「{{ column.name }}」
                        </a>,
                    {% endfor %}
                    {% if post.columns | length > 1 %} {{ _("and") }}{% endif %}
                    <a href="{{ url_for('main.view_column', id=post.columns[-1].id) }}">
                        {{ _("Column") }} 「{{ post.columns[-1].name }}」
                    </a>.
                </p>
            {% endif %}
            <div class="text-muted" style="font-size: small">{{ render_timestamp(post.timestamp) }}</div>
            {{ post_actions(post) }}
        </div>
    </li>
{% endmacro %}

{% macro group_card(group) %}
    <li class="list-group-item">
        <h3>{{ _("Group name:" ) }} {{ group.name }}
            {% if group.private %}
                <span class="badge badge-dark">
                    {{ _("Private") }}
                </span>
            {% endif %}
        </h3>
        <h4>{{ _("Manager: ") }}
            <a href="{{ group.manager.profile_url() }}"
               class="text-muted profile-popover"
               data-href="{{ url_for('ajax.get_profile', user_id=group.manager.id) }}">
                {{ group.manager.username }}
            </a>
        </h4>
        <h4>
            <i class="bi-info"></i>
            <a href="{{ url_for('group.info', id=group.id) }}">
                {{ _("Group Info") }}
            </a>
        </h4>
    </li>
{% endmacro %}

{% macro column_card(column, extra_classes="") %}
    <li class="list-group-item {{ extra_classes }}">
        <h3>{{ _("Column name:") }} <a href="{{ url_for('main.view_column', id=column.id) }}">{{ column.name }}</a></h3>
        <h4>{{ _("Author: ") }}
            <a href="{{ column.author.profile_url() }}"
               class="text-muted profile-popover"
               data-href="{{ url_for('ajax.get_profile', user_id=column.author.id) }}">
                {{ column.author.username }}
            </a>
        </h4>
        <h4>
            {{ _("Created") }} {{ moment(column.timestamp).fromNow(refresh=True) }}
    </h4>
    <div>
    {% if current_user.can(Permission.MODERATE) %}
        {% if not column.topped %}
        <form method="POST" action="{{ url_for('main.top_column', id=column.id) }}">
            <input type="hidden" value="{{ csrf_token() }}" name="csrf_token">
            <button class="btn btn-primary" type="submit">
                <i class="bi-arrow-bar-up">{{ _("Top") }}</i>
            </button>
        </form>
        {% else %}
        <form method="POST" action="{{ url_for('main.untop_column', id=column.id) }}">
            <input type="hidden" value="{{ csrf_token() }}" name="csrf_token">
            <button class="btn btn-primary" type="submit">
                <i class="bi-arrow-bar-down">{{ _("Untop") }}</i>
            </button>
        </form>
        {% endif %}
    {% endif %}
    </div>
    </li>
{% endmacro %}

{% macro message_card(message) %}
    {% set user = message.author %}
    <div class="message-card">
        <div class="d-flex justify-content-center">
            <p class="text-muted">
                <small>{{ moment(message.timestamp).format('LLL') }}</small>
            </p>
        </div>
        {% if message.author == current_user %}
            <div class="d-flex justify-content-end mb-3">
                <span class="bg-success message-body self">
                    {{ message.body }}
                </span>
                <a href="{{ url_for('user.profile', username=user.username) }}">
                    <img src="{{ user.avatar_url() }}" class="profile-popover"
                         data-href="{{ url_for('ajax.get_profile', user_id=user.id) }}">
                </a>
            </div>
        {% else %}
            <div class="d-flex justify-content-start" style="margin-bottom: 10px">
                <a href="{{ url_for('user.profile', username=user.username) }}">
                    <img src="{{ user.avatar_url() }}" class="profile-popover" alt="{{ user.username }}"
                         data-href="{{ url_for('ajax.get_profile', user_id=user.id) }}" height="30px" width="auto">
                </a>
                <span class="bg-light message-body others">
                    {{ message.body }}
                </span>
            </div>
        {% endif %}
    </div>
{% endmacro %}

{% macro action_card(icon, text, link) %}
    <div class="d-inline-flex action justify-content-center flex-fill">
        <a class="action-link" href="{{ link }}">
            <div class="action-icon flex-grow-2 align-self-center">
                <i class="{{ icon }}"></i>
            </div>
            {{ text }}</a>
    </div>
{% endmacro %}

{% macro load_ckeditor() %}
    {{ ckeditor.load() }}
    {{ ckeditor.config(name="content") }}
    {{ ckeditor.config(custom_config="extraAllowedContent: '"+allowed_tags+"'") }}
{% endmacro %}
